<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>轮播图</title>
    <style>
        .banner{
            position: relative;
            margin-left: 100px;
            width: 500px;
            height: 500px;
            overflow: hidden;
        }
        .title{
            position: absolute;
            left: 0;
            bottom: 0;
        }
        ul{
            display: flex;
            position: absolute;
            bottom: 0;
            left: 200px;
        }
        li{
            list-style: none;
            margin-right: 10px;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background-color: #000000;
            cursor: pointer;
            
            
        }
        .active{
            background-color: #ffffff;
        }
        .banner img:hover{
            transition: all 0.5s;
            transform: scale(1.1);
        }
    </style>
</head>
<body>
    <div class="banner">
        <img src="../views/photo/banner/banner01.webp" alt="第一" >
        <div class="title">第一</div>
        <ul>
            <li class="active"></li>
            <li></li>
            <li></li>
        </ul>
    </div>
</body>

<script>
    const banner=[
        {url:"../views/photo/banner/banner01.webp",title:"第一"},
        {url:"../views/photo/banner/banner02.webp",title:"第二"},
        {url:"../views/photo/banner/banner03.webp",title:"第三"}
    ]

    const img = document.querySelector('.banner img')
    const t =document.querySelector('.banner .title')
    let i=0
    let n

    const mouse = document.querySelector('.banner')
    mouse.addEventListener('mouseover',()=>{
        clearInterval(n)
    })

    mouse.addEventListener('mouseout',()=>{
    n = setInterval(() => {
        i++
        if(i>=banner.length){
            i = 0
        }
        img.src=banner[i].url
        t.innerHTML=banner[i].title
        document.querySelector('.banner .active').classList.remove('active')
        document.querySelector(`.banner li:nth-child(${i+1})`).classList.add('active')

        
    }, 1000);
})


    const click = document.querySelector('.banner ul li')
    
</script>

</html>